<!--对应处方-->
<template>
  <DxPopup
    v-model:visible="popupVisible"
    :drag-enabled="false"
    :close-on-outside-click="false"
    :show-close-button="true"
    :show-title="true"
    :width="550"
    :height="595"
    @hidden="hidden"
    title="对应诊疗处方单据"
  >
    <DxForm label-location="left" :col-count="1">
      <DxGroupItem>
        <DxSimpleItem data-field="">
          <DxLabel text="药品品种" />
          <div>
            <DxTextBox v-bind="{ stylingMode: 'outlined', disabled: true }" />
          </div>
        </DxSimpleItem>
        <DxSimpleItem data-field="">
          <div class="pishi">
            <DxCheckBox :width="100" text="门诊采用" :value="true" />
            <DxSelectBox style="flex:1" v-bind="tagSetting" />
          </div>
        </DxSimpleItem>
        <DxSimpleItem data-field="">
          <div class="pishi">
            <DxCheckBox :width="100" text="住院采用" :value="true" />
            <DxSelectBox style="flex:1" v-bind="tagSetting" />
          </div>
        </DxSimpleItem>
      </DxGroupItem>
    </DxForm>

    <div class="lb-form-button-right">
      <DxButton
        text="取消"
        styling-mode="text"
        type="default"
        @click="hidden()"
      />

      <DxButton
        text="保存并继续添加"
        styling-mode="text"
        type="default"
      />

      <DxButton
        text="保存并退出"
        styling-mode="text"
        type="default"
      />
        <!-- @click="save" -->
    </div>
  </DxPopup>
</template>

<script lang="ts">
import { DxPopup } from "devextreme-vue/popup";
import {
  DxForm,
  DxSimpleItem,
  DxGroupItem,
  DxRequiredRule,
  DxLabel
} from "devextreme-vue/form";
import DxTagBox from "devextreme-vue/tag-box";
import DxCheckBox from "devextreme-vue/check-box";
import { ElButton, ElIcon, ElAlert } from "element-plus";
import { Vue, Options, Prop, Watch } from "vue-property-decorator";
import { DxColumn, DxDataGrid, DxEditing } from "devextreme-vue/data-grid";
import DataSource from "devextreme/data/data_source";
import DxButton from "devextreme-vue/button";
import { dxSelectBoxOptions } from "devextreme/ui/select_box";
import { DxSelectBox } from "devextreme-vue/select-box";
import { DxTextBox } from "devextreme-vue/text-box";
@Options({
  components: {
    DxPopup,
    DxForm,
    DxSimpleItem,
    DxGroupItem,
    DxRequiredRule,
    DxLabel,
    DxTagBox,
    DxCheckBox,
    ElButton,

    DxColumn,
    DxDataGrid,
    DxEditing,
    DxButton,
    ElIcon,
    ElAlert,
    DxSelectBox,
    DxTextBox
  }
})
export default class CreateDrugPres extends Vue {
  @Prop({ type: Boolean, default: false }) value!: boolean;

  editOptions = {
    stylingMode: "outlined",
    placeholder: "请输入"
  };

  getSimpleSuffix(
    text: string,
    extendOptions: dxSelectBoxOptions
  ): dxSelectBoxOptions {
    let options: dxSelectBoxOptions = {
      stylingMode: "outlined",
      buttons: [
        {
          name: "unit",
          location: "after",
          options: {
            text: text,
            stylingMode: "text"
          }
        }
      ]
    };

    return Object.assign({}, extendOptions, options);
  }
  getSelectBoxOptions(extendOptions: dxSelectBoxOptions) {}

  tagSetting: dxSelectBoxOptions = {
    stylingMode: "outlined",
    showSelectionControls: true,

    displayExpr: "value",
    valueExpr: "key",
    searchEnabled: true,
    searchExpr: "value",
    showDropDownButton: true
  };

  popupVisible = this.value||false;

  dataSource = [];

  created() {}

  @Watch("value")
  watchValue() {
    this.popupVisible = this.value;
  }

  hidden() {
    this.popupVisible = false;
    this.$emit("update:value", this.popupVisible);
  }
}
</script>

<style lang="scss" scoped>
.title {
  height: 56px;
  padding: 15px;
  .title-content {
    display: flex;
    justify-content: space-between;

    .title-operation {
      display: flex;
      justify-content: space-between;
    }
  }
}
.notice {
  display: flex;
  padding: 10px 0;
  .el-alert {
    width: auto;
    margin: 0 5px;
    padding: 4px;
  }
}
.pishi {
  display: flex;
  // justify-content: start;
  align-items: center;
}
.center-title {
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lb-form-button-right {
  .div1 {
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
